// @ts-nocheck
import React, { Component } from 'react';

// 引入connect方法用于连接容器组件和UI组件
import {connect} from 'react-redux'

// 引入action
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from '../../redux/actions/count'

// UI组件
class Count extends Component {

  
  increment = () => {
    // console.log (this.selectNum)
    const {value} = this.selectNum
    this.props.jia (value*1)
  }

  decrement = () => {
    const {value} = this.selectNum
    this.props.jian (value*1)
  }

  incrementIfOdd = () => {
    const {value} = this.selectNum
    if (this.props.count %2 !== 0) {
      this.props.jia (value*1)
    }
    
  }

  incrementAsync = () => {
    const {value} = this.selectNum
    this.props.asyncJia (value*1, 1000)
  }

  render() {
    return (
      <div>
        <h1> 求和为： {this.props.count}, Person组件总人数为: {this.props.person.length} </h1>
        <select  ref={c => this.selectNum = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select> &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>和为奇数 +</button>&nbsp;
        <button onClick={this.incrementAsync}>异步 +</button>&nbsp;
      </div>
    );
  }
}

// 创建并暴露count容器组件
export default  connect(
  // 简写
  state => ({count: state.count, person: state.persons}), 
  // dispatch => ({
  //   jia: (number) => {dispatch (createIncrementAction (number))},
  //   jian: number => dispatch (createDecrementAction (number)), 
  //   asyncJia: (number, time) => dispatch (createIncrementAsyncAction (number, time)), 
  // }) 
  {
    jia: createIncrementAction,
    jian: createDecrementAction,
    asyncJia: createIncrementAsyncAction
  }
)(Count)